<template>
	<view v-if="pageShow" style="padding-bottom: 150rpx;">
		<!-- 分享二维码 -->
		<u-popup :show="fxshow" @close="fxclose" mode="center">
			<view class="mainpadding block erwmbjsty">
				<view class="mainpadding2s radius ffffff" style="width: 428rpx;">
					<view class="erwmtu">
						<image src="../static/image/system/ms.png" mode=""></image>
					</view>
					<view class="margin_top2">
						<view class="ershiba xiaohei nofonweight">套餐名称</view>
						<view class="margin_top1 xiaohui ershil nofonweight">
							详情内容详情内容详情内容详情内容详情内容详情内容详情
						</view>
					</view>
				</view>
				<view class="flexbetween margin_top2">
					<view class="xiaolan ershil nofonweight">长按识别图中二维码</view>
					<view class="erwim">
						<image src="../static/image/system/kj.png" mode=""></image>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 轮播图 -->
		<view class="dingwei">
			<u-swiper :list="dataAll.images_text" circular radius="0" height="290px"></u-swiper>
			<view class="flexleft icowz">
				<u-icon name="star" size="26" color="#f5f5f5" v-if="dataAll.is_sc==0" @click="collect()"></u-icon>
				<u-icon name="star-fill" size="26" color="#ffa126" v-if="dataAll.is_sc==1" @click="collect()"></u-icon>
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="share">
					<u-icon name="share-square" size="26" color="#f5f5f5"></u-icon>
				</button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<u-icon name="share-square" size="26" color="#f5f5f5"  @click="sharePoster()" ></u-icon>
				<!-- #endif -->
			</view>
		</view>
		<!-- 场地信息 -->
		<view class="mainpadding ffffff">
			<view class="sanshier xiaohei fonweight">{{dataAll.name}}</view>
			<view class="margin_top1 flexleft">
				<view class="margin_right1">
					<u-icon name="clock-fill" size="24" color="#999999"></u-icon>
				</view>
				<view class="ershiba xiaohei nofonweight">营业时间：{{dataAll.start_time}}-{{dataAll.end_time}}</view>
			</view>
			<view class="flexleft margin_top1 xiahuaxian">
				<view class="huibtn margin_right1" v-for="(item,index) in dataAll.cg_bq_ids_text" :key="index">
					{{item}}
				</view>
			</view>
			<view class="flexbetween margin_top2">
				<view class="">
					<view class="flexleft">
						<view class="dizhilv margin_right1"></view>
						<view class="xiaohei nofonweight ershiba">{{dataAll.cityinfo}}</view>
					</view>
					<view class="xiaohui strongtext nofonweight margin_top1">{{dataAll.address}}</view>
				</view>
				<view class="" @click="phone(dataAll.mobile)">
					<u-icon name="phone-fill" size="20"></u-icon>
					<view class="xiaohui strongtext nofonweight margin_top1">电话</view>
				</view>
			</view>
		</view>
		<!--推荐场地  -->
		<!-- <view class="ffffff mainpadding margin_top1">
			<view class="flexbetween">
				<view class="">
					<u-tabs :list="list2" lineColor="#1BA95B" @click="changetab" :activeStyle="{
						    color: '#333333',
						    fontWeight: 'bold',
						    transform: 'scale(1.05)'
						}" :inactiveStyle="{
						            color: '#333333',
									fontWeight: '400',
						            transform: 'scale(1)'
						        }" itemStyle="padding-left: 5px; padding-right: 10px; height: 44px;"></u-tabs>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="xiahuaxian margin_top" v-for="item in 3">
				<view class="flexbetween">
					<view class="shilitu">
						<image src="../static/image/system/banner1.png" mode=""></image>
					</view>
					<view class="" style="width: 69%;">
						<view class="titletext xiaohei fonweight yhxk">这是一个场地标题这是一个场地... </view>
						<view class="strongtext xiaohui nofonweight margin_top2">场地信息内容 </view>
						<view class="flexbetween margin_top2">
							<view class="titletext xiaohong fonweight">¥ 500</view>
							<view class="xiaolvbtn" @click="tzyy">预定</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 场地介绍 -->
		<view class="ffffff mainpadding margin_top1">
			<view class="flexbetween" @click="tzchadjs(dataAll.userzbfapply.id)">
				<view class="titletext xiaohei fonweight">场地介绍</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="flexbetween margin_top">
				<view class="changdi">
					<image :src="dataAll.userzbfapply.logo_text" mode=""></image>
				</view>
				<view class="" style="width: 83%;">
					<view class="titletext xiaohei nofonweight">{{dataAll.userzbfapply.name}}</view>
					<view class="ershil xiaohui nofonweight xiankuan margin_top1">
						{{dataAll.userzbfapply.des}}
					</view>
				</view>
			</view>
		</view>
		<!-- 教练 -->
		<!-- <view class="ffffff mainpadding margin_top1">
			<view class="flexbetween">
				<view class="">
					<u-tabs :list="list3" lineColor="#1BA95B" :activeStyle="{
						    color: '#333333',
						    fontWeight: 'bold',
						    transform: 'scale(1.05)'
						}" :inactiveStyle="{
						            color: '#333333',
									fontWeight: '400',
						            transform: 'scale(1)'
						        }" itemStyle="padding-left: 5px; padding-right: 10px; height: 44px;"></u-tabs>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="flexleft flex_wrap">
				<view class="sanshis flexcenter margin_top" v-for="item in 3">
					<view class="">
						<view class="jiaolt">
							<image src="../static/image/system/banner1.png" mode=""></image>
						</view>
						<view class="xiaohei titletext nofonweight margin_top2 textcenter">XXX教练</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 评价管理 -->
		<view class="mainpadding ffffff margin_top1" v-if="listpj.length">
			<view class="strongtext margin_top flexright"
				@click="jumpurl('/pages_homepage/yonghupj?type=3&id=',listid)">
				<text>查看全部</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="margin_top xiahuaxian" v-for="item in listpj" :key="item.id">
				<view class="flexbetween ">
					<view class="flexleft">
						<view class="touxiang margin_right2">
							<image :src="item.user.avatar_text" mode=""></image>
						</view>
						<view class="">
							<view class="titletext fonweight xiaohei">{{item.user.nickname}}</view>
							<view class="strongtext nofonweight xiaohui">{{item.createtime_text}}</view>
						</view>
					</view>
					<view class="flexright">
						<u-icon name="star-fill" color="#F8B900" size="22" v-for="ite in item.score"
							:key="ite"></u-icon>
					</view>
					<!-- <u-icon name="star" color="#999999" size="22"></u-icon> -->
				</view>
				<view class="margin_top2 xiaohei ershiba nofonweight">{{item.content}}</view>
				<view class="flexleft flex_wrap">
					<view class="sanshis flexcenter margin_top2" v-for="(ite,inde) in item.images_text" :key="inde">
						<view class="jiaolt">
							<image :src="ite" mode="" @click="lbtpriview(inde,item.images_text)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding ffffff margin_top1">
			<view class="sanshier xiaohei fonweight">场地详情</view>
			<view class="margin_top2 ">
				<image class="cgtpiam" v-for="(item,index) in dataAll.detail_images_text" :key="index"
					@click="lbtpriview(index,dataAll.detail_images_text)" :src="item" mode="widthFix"></image>
			</view>
		</view>
		<view class="mainpadding ffffff gudingdb">
			<view class="bigbtn" @click="yuding()">立即预定</view>
		</view>
		<zhangyu-qrcode-poster ref="poster" :title="dataAll.name" :subTitle="dataAll.userzbfapply.des" :headerImg="dataAll.image_text"
			price=""></zhangyu-qrcode-poster>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [],
				list2: [{
						name: '推荐场地',
						value: 1,
					},
					{
						name: '羽毛球',
						value: 2
					},
					{
						name: '篮球',
						value: 3
					}
				],
				list3: [{
						name: '场地教练',
						value: 1,
					},
					{
						name: '自由教练',
						value: 2
					}
				],
				currenttabtow: 0,
				show: false,
				fxshow: false,
				dataAll: {},
				listid: "",
				pageShow: false,
				listpj: [],
				ewmimg:"",
			}
		},
		onLoad(options) {
			if(options.id){
				this.listid = options.id
			}
			if (options.rec_user_id) {
				uni.setStorageSync("rec_user_id", options.rec_user_id)
			}
			console.log(options,"接收的参数");
			// #ifdef MP-WEIXIN
			let _this = this
			const url = decodeURIComponent(options.q) // 获取到二维码原始链接内容
			if (url.indexOf("?") != -1) {
				var str = url.substr(url.indexOf("?") + 1);
				var strs = str.split("&");
				let theRequest = {};
				for (var i = 0; i < strs.length; i++) {
					theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
				}
				console.log(theRequest,"二维码接收的参数");
				this.listid = options.id ? options.id : (theRequest.id ? theRequest.id :
					0);
				let rec_user_id = options.rec_user_id ? options.rec_user_id : (theRequest.rec_user_id ? theRequest.rec_user_id :
					0);
				if (rec_user_id != 0) {
					uni.setStorageSync('rec_user_id', rec_user_id);
				}
			}
			// #endif
			this.getDetail()
			this.init()
			// #ifdef APP-PLUS
			this.getewm()
			// #endif
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage() {
			let _this = this
			return {
				title: this.dataAll.name,
				path: "pages_homepage/changdingydqx?id=" + this.listid + "&rec_user_id=" + uni.getStorageSync("user_id"),
			}
		},
		// #endif
		methods: {
			getewm(){
				httpRequest.request("/api/user/getCodeImage", 'GET', {
					type_id:this.listid,
					type: 1 //1=场地,2=课程,3=赛事,4=活动,5=商城
				}, false, false, true).then(res => {
					this.ewmimg = res.data.code_image
				})
			},
			sharePoster(){
			       //获取带参数二维码
			       this.$refs.poster.showCanvas(this.ewmimg)
			   },
			
			yuding() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.navigateTo({
					url: "/pages_homepage/xuanzechangci?id=" + this.listid
				})
			},
			jumpurl(url, id) {
				uni.navigateTo({
					url: url + id
				})
			},
			init() {
				let _this = this;
				let data = {
					page: 1,
					limit: 2,
					cg_id: this.listid
				}
				let url = '/api/cgcl/cgCommentList'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						this.listpj = res.data.data;
					}
				})
			},
			lbtpriview(index, arr) {
				var i = arr; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			collect() {
				httpRequest.request('/api/cgcl/cgCollect', 'GET', {
					cg_id: this.listid
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.dataAll.is_sc = this.dataAll.is_sc == 1 ? 0 : 1
					}
				})
			},
			getDetail() {
				httpRequest.request('/api/cgcl/cgDetail', 'GET', {
					id: this.listid
				}).then(res => {
					this.dataAll = res.data
					this.pageShow = true
				})
			},
			// 跳转场地介绍
			tzchadjs(id) {
				uni.navigateTo({
					url: '/pages_homepage/changguanjieshao?id=' + id
				})
			},
			// 跳转预约
			tzyy() {
				uni.navigateTo({
					url: '/pages_homepage/changdiyy'
				})
			},
			//跳转用户评价
			tzyhpj() {
				uni.navigateTo({
					url: '/pages_homepage/yonghupj'
				})
			},
			changetab(e) {
				this.currenttabtow = e.index;
			},
			close() {
				this.show = false
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			},
			fxclose() {
				this.fxshow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bofang {
		width: 120rpx;
		height: 120rpx;
		background-size: 100% 100%;
		position: absolute;
		bottom: 222rpx;
		left: 316rpx;
		background-image: url('../static/image/system/bfh.png');
	}

	.erwim {
		width: 128rpx;
		height: 128rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.cgtpiam {
		width: 100%;
		// border-radius: 16rpx;
	}

	.erwmtu {
		width: 412rpx;
		height: 328rpx;
		border-radius: 8rpx;

		image {
			border-radius: 8rpx;
			width: 100%;
			height: 100%;
		}
	}

	.block {
		background: linear-gradient(180deg, #EFF7FF 0%, #D1E8FF 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.guandys {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.touxiang {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;

		image {
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			width: 100%;
			height: 100%;
		}
	}

	.jiaolt {
		width: 210rpx;
		height: 210rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.changdi {
		width: 100rpx;
		height: 100rpx;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.xiaolvbtn {
		width: 112rpx;
		height: 56rpx;
		background: #1BA95B;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shilitu {
		width: 200rpx;
		height: 160rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.huibtn {
		background: #F9F9F9;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 6rpx 10rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
	}

	.icowz {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}

	page {
		background-color: #F9F9F9;
	}
</style>